---
title: "Ejemplo"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    theme: cosmo
    source_code: embed
---

```{r setup, include=FALSE}
library(flexdashboard)
library(tidyverse)
library(plotly)
library(leaflet)
library(crosstalk)
library(RColorBrewer)
library(viridis)
library(paletteer)
library(ggplot2)
library(kableExtra)
library(htmltools)

# Datos y SharedData
data("mtcars")
mtcars <- mtcars %>% tibble::rownames_to_column("modelo") %>%
  mutate(cyl = factor(cyl), gear = factor(gear))
sd <- SharedData$new(mtcars, group = "mtcars")


pal <- RColorBrewer::brewer.pal(6, "Set2")
```

Instrucciones y guia
=========================================================================

Renglon1 
-------------------------------------------------------------------------

### Ejemplo renglon 1, elemento 1

Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 

### Ejemplo renglon, elemento 2

- **negritas** `codigo`

Renglon2
-------------------------------------------------------------------------

### Ejemplo renglon 2 

Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 2222222

KPIs
=========================================================================

## Renglon de KPIS

### Numero de autos
```{r}
valueBox( nrow(mtcars), caption= 'TEXTO', icon = "fa-car", color = "primary" )
```

### Numero de autos
```{r}
valueBox( nrow(mtcars), caption= 'TEXTO 2', icon = "fa-car", color = "info" )
```

### Numero de autos
```{r}
valueBox( nrow(mtcars), caption= 'TEXTO 2', icon = "fa-car", color = "warning" )
```

### Numero de autos
```{r}
valueBox( nrow(mtcars), caption= 'TEXTO 2', icon = "fa-car", color = "success" )
```

## Renglon 2 con indicador semicircular 

```{r}
gauge(
  value = 10, min = 0, max= 100, symbol = "%",
  gaugeSectors(
    success = c(80,100),
    warning = c(60,79),
    danger = c(0,59)
  )
)
```

Exploración
=========================================================================

## Controles {.sidebar}

```{r}
# Filtros crosstalk: aplican a los gráficos de esta pestaña
filter_select("filtra_cyl", "Cilindros", sd, ~cyl, multiple = TRUE)
```

Row
------------------------------------------------------

### Dispersión HP vs MPG 

```{r scatter_code, include=TRUE}
# Gráfico interactivo nativo de plotly (evita ggplotly)
plot_ly(
  sd, x = ~hp, y = ~mpg,
  color = ~cyl, colors = pal,
  type = "scatter", mode = "markers",
  text = ~paste("Modelo:", modelo, "<br>cyl:", cyl, "<br>gear:", gear)
) %>%
  layout(title = "HP vs MPG (usa filtros a la izquierda)")
```

### Boxplot MPG por marchas (gear) y color por cilindros

```{r box_code, include=TRUE}
plot_ly(
  sd, x = ~gear, y = ~mpg, color = ~cyl,
  type = "box"
) %>%
  layout(title = "Distribución de MPG por marchas (gear)")
```

Mapa y tabla 
======================================================================

### Mapa con leaflet

```{r}
# Marcadores AZULES con addMarkers()
leaflet(quakes) %>%
  addTiles() %>%
  addMarkers(
    lng = ~long, lat = ~lat,
    popup = ~paste("Profundidad:", depth, "km<br>Magnitud:", mag)
  )
```

### Tabla

```{r}
mtcars %>%
  select(modelo, cyl, gear, mpg, hp, wt) %>%
  arrange(desc(mpg)) %>%
  head(10) %>%
  knitr::kable(format = "html", caption = "Top 10 autos por MPG",
               col.names = c("Modelo","Cilindros","Marchas","MPG","HP","Peso(1000lbs)"),
               digits = 2, align = c("l","c","c","c","c","r")) %>%
  kableExtra::kable_styling(full_width = FALSE, bootstrap_options = c("striped", "hover", "condensed")) %>%
  kableExtra::scroll_box(height = "350px")
```


# Recursos 

## renglon 1

### cajita 1 

### cajita 2

## renglon 2